<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<title>Prime Numbers</title>
		<script type="text/javascript" src="tgd/Math/SieveOfEratosthenes.js"></script>
		<script type="text/javascript" src="tgd/Utilities/Throbber.js"></script>
		<script type="text/javascript">
			//<![CDATA[

			var _sieve = null;
			var _body = null;
			var _throb = null;
			var _input = null;

			function init() {
				_body = document.getElementsByTagName("body")[0];
				_primes = document.getElementById("primes");
				_input = document.getElementById("txtMax");
				_throb = new tgd.Utilities.Throbber();

				_throb.getCanvas().style.fontSize
					= _throb.getCanvas().style.lineHeight
					= _throb.getCanvas().style.height
					= _throb.getCanvas().style.width
					= (Math.min(_body.clientWidth, _body.clientHeight) - 20).toString() + "px";

				_body.appendChild(_throb.getCanvas());
				_body.appendChild(_primes);

				_input.focus();
			}

			function getPrimes(num) {
				_throb.start();
				_sieve = new tgd.Math.SieveOfEratosthenes(num, function() {
					var div = document.createElement("div");
					_primes.insertBefore(div, (_primes.hasChildNodes() ? _primes.childNodes[0] : null));
					if (_primes.hasChildNodes() && _primes.childNodes.length > 10) {  //only keep 10 sieves
						_primes.removeChild(_primes.childNodes[10]);
					}
					div.innerHTML = "<h1>Primes from 2 to " + num + ".  [" + _sieve.getNumPrimes() + "]</h1>" + _sieve;
					_input.value = "";
					_input.focus();
					_throb.stop();
				});
			}

			//]]>
		</script>
		<style type="text/css">
			body,html{margin:0;height:100%;width:100%;background:#333;font-size:.8em;}
			#primes div{background:#fff;font-family:Consolas;padding:.5em;margin:.5em;}
			h1{margin:0;padding:0 .2em;font-size:2em;font-family:calibri;}
			h1,.throbber{background:#A4C639;color:#fff;border:solid 1px #333;}
			.throbber{position:absolute;top:10px;left:10px;padding:0;margin:0;font-weight:bold;text-align:center;font-family:'OCR A Extended',Calibri;}
			#menu{font-size:1.5em;border-bottom:solid 1px #ccc;background:#A4C639;color:#666;text-align:right;}
			#menu a{color:#000;}
			#menu input#txtMax{background:#333;margin:0;padding:0;border:solid 1px #ccc;color:#A4C639;font-weight:bold;padding:1px;font-family:consolas;}
		</style>
	</head>
	<body onload="init();">
		<div id="menu">
			Type a number and press enter for a specific <a href="http://en.wikipedia.org/wiki/Sieve_of_Eratosthenes" title="Wikipedia article">Sieve of Eratosthenes</a>
			<input type="text" id="txtMax" maxlength="6" size="6" title="Enter # and press enter." onkeyup="if (event.keyCode == 13) { getPrimes(parseInt(this.value)); }" />
			or get a <a href="javascript:getPrimes(parseInt(Math.random() * 100000));">random</a> sieve.
		</div>
		<div id="primes"></div>
	</body>
</html>